import { Table, Popconfirm, Button } from 'antd';
// import TableRowSelection from 'antd/lib/table';
import { OtherCost, ModelReturn } from '@/data-type';
// import {PrivilegeUser} from '@/api-type';
// import { FormattedMessage } from 'umi'
import { useState } from 'react';
import { useHistory } from 'react-router';
import { FormatterTime, getIdFromHistory, needbackButton } from '@/utils/kits';
// import { render } from '@umijs/deps/compiled/mustache';
import React from 'react';
// import ReactDOM from 'react-dom';
import { ColumnsType, ColumnType } from 'antd/lib/table'
// import UpdateDrawer from '@/components/common/UpdateDrawer'
// import Calender from './Calender/index'
import { EditableTable, EditCellProp, ItemKey } from './common/EditTable';
import BackButton from './common/BackButton';
import AddRecord from './common/AddRecord';

const ShowOtherCost: React.FC<{
  model: ModelReturn<OtherCost>
}> = (params) => {
  let otherCosts = params.model.dataSource;
  const onUpdate = params.model.updateOne;
  const onDelete = params.model.deleteById;
  const [showDetail, setShowDetail] = useState(false);
  const [addDrawer, setAddDrawer] = useState(false);
  const [currentRow, setCurrentRow] = useState<OtherCost>();
  //用于路由跳转
  const history = useHistory();
  let formRef = React.createRef<any>();
  function openUpdate(cost: OtherCost) {
    // console.log("update user", user);
    setCurrentRow(cost);
    setShowDetail(true);
    formRef.current.setFieldsValue(cost);
  }
  const onCloseDrawer = () => {
    setShowDetail(false);
  }
  function openAddDrawer() {
    setAddDrawer(true);
  }

  const tableColumns: ColumnsType<OtherCost & ItemKey> & EditCellProp = [
    {
      title: 'ID',
      fixed: false,
      dataIndex: 'id',
      disableEdit: false,
    },
    {
      title: '项目Id',
      fixed: false,
      dataIndex: 'programId',
      disableEdit: false,
    },
    {
      title: '项目详情Id',
      fixed: false,
      dataIndex: 'programDetailId',
      disableEdit: false,
    },
    {
      title: '花费类型',
      fixed: false,
      dataIndex: 'costType',
      disableEdit: false,
    },
    {
      title: '单价',
      fixed: false,
      dataIndex: 'unitPrice',
      disableEdit: false,
    },
    {
      title: '数量',
      fixed: false,
      dataIndex: 'count',
      disableEdit: false,
    },
    {
      title: '已支付',
      fixed: false,
      dataIndex: 'paid',
      disableEdit: false,
    },
    {
      title: '未支付',
      fixed: false,
      dataIndex: 'unpaid',
      disableEdit: false,
    },
    {
      title: '总额',
      fixed: false,
      dataIndex: 'amount',
      disableEdit: false,
    },
    {
      title: '状态',
      fixed: false,
      dataIndex: 'status',
      disableEdit: false,
    },
    {
      title: '备注ID',
      fixed: false,
      dataIndex: 'remarkId',
      disableEdit: false,
    },
    {
      title: '开始时间',
      dataIndex: 'startDate',
      fixed: false,
      render: FormatterTime,
      disableEdit: false,
    },
    {
      title: '结束时间',
      dataIndex: 'endDate',
      fixed: false,
      render: FormatterTime,
      disableEdit: false,
    },
  ];
  interface temp extends ItemKey, OtherCost { }
  const hasKeyDatas: temp[] = otherCosts?.map((otherCost, index) => {
    return {
      ...otherCost,
      key: index.toString()
    }
  }) ?? new Array<OtherCost & ItemKey>()
  return (
    <div>
      <Button onClick={() => openAddDrawer()}>新增</Button>
      <BackButton show={needbackButton(history.location.state)} history={history}></BackButton>
      <EditableTable recordDatas={hasKeyDatas} columnDescrible={tableColumns}></EditableTable>
      <AddRecord onClose={()=>setAddDrawer(false)}
        visible={addDrawer}
        save={params.model.saveOne}
        datas={tableColumns}
      ></AddRecord>
    </div>
  );
};
export default ShowOtherCost;